<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible"
          content="ie=edge">
    <title>{$model_post->title}-{:get_system_config('site_name')}</title>
    {include file='common/_require'/}
    <link rel="stylesheet"
          href="/static/lib/quill/quill.snow.css">
    <link rel="stylesheet"
          href="/cdn/augmented-ui.min.css">
    <link rel="stylesheet"
          href="/cdn/fontawesome-free-6.4.0-web/css/all.min.css" />
    <link rel="stylesheet"
          href="/static/lib/markdown-css/github-markdown.css">


    <style>
        .ql-editor {
            padding: 15px 0;
        }
    </style>
</head>

<body>

    <div class="layui-container">
        <div class="layui-row ul-padding-md">
            <div style="font-size: 22px;">
                {:get_system_config('site_name')}
            </div>
            <div style="font-size: 18px;">
                {:get_system_config('site_desc')}
            </div>
        </div>
        <div class="layui-row layui-col-space6 "
             style="margin-top: 15px;">
            <div class="layui-col-md3 ul-border-right">
                <div class="ul-nav-tree ul-padding-md ">

                    {volist name='list_post' id='category'}
                    <div class="ul-nav-tree-group">
                        <div class="ul-nav-tree-group-title">
                            {$category.title}
                        </div>
                        <div class="ul-nav-tree-group-main">
                            {volist name='category.post' id='post'}
                            <a href="{$post.read_url}"
                               class="ul-nav-tree-item {eq name='post.id' value='$model_post.id'}current{/eq}">
                                <div class="ul-nav-tree-item-title">
                                    {$post.title}
                                </div>
                                <div class="ul-nav-tree-item-desc">
                                    {$post.desc}
                                </div>
                            </a>
                            {/volist}
                        </div>
                    </div>
                    {/volist}

                </div>
            </div>
            <div class="layui-col-md9">
                <div class="main-content ul-padding-md">
                    <div class="">
                        <span class="layui-breadcrumb"
                              lay-separator="/">
                            <a href="{:url('Index/index')}">首页</a>
                            <a><cite>{$model_post->title}</cite></a>
                        </span>
                    </div>
                    <div class="ql-snow">
                        <div class="ql-editor">{$model_post->content_html|raw}</div>
                    </div>
                    <div class="demo-page"
                         id="app-demo-page"
                         data-prismjs-copy="复制"
                         data-prismjs-copy-error="复制失败"
                         data-prismjs-copy-success="复制成功!">
                        {$model_post->demo_page|raw}

                        {volist name='model_post->components' id='vo'}
                        <fieldset class="layui-elem-field layui-field-title no-parser">
                            <legend>{$vo.config.TITLE}</legend>
                            <div class="layui-field-box">

                                <div class="component-item"
                                     style="margin-top: 10px;"
                                     data-margin="{$vo.config.MARGIN|default='0'}"
                                     data-padding="{$vo.config.PADDING|default='0'}"
                                     data-gray="{$vo.config.GRAY|default='0'}"
                                     data-mobile="{$vo.config.MOBILE|default='0'}"
                                     data-inner-margin="{$vo.config.INNER_MARGIN|default='0'}">
                                    <div class="">
                                        <span>预览效果</span>
                                        <div class="layui-btn-group"
                                             style="margin-left: 10px;">
                                            <button type="button"
                                                    class="layui-btn layui-btn-xs"
                                                    @click="padding = 1"
                                                    :class="padding == 1 ? 'layui-btn-normal' : 'layui-btn-primary'">padding</button>
                                            <button type="button"
                                                    class="layui-btn layui-btn-xs"
                                                    @click="padding = 0"
                                                    :class="padding == 0 ? 'layui-btn-normal' : 'layui-btn-primary'">无</button>
                                        </div>
                                        <div class="layui-btn-group"
                                             style="margin-left: 10px;">
                                            <button type="button"
                                                    class="layui-btn layui-btn-xs"
                                                    @click="margin = 1"
                                                    :class="margin == 1 ? 'layui-btn-normal' : 'layui-btn-primary'">margin</button>
                                            <button type="button"
                                                    class="layui-btn layui-btn-xs"
                                                    @click="margin = 0"
                                                    :class="margin == 0 ? 'layui-btn-normal' : 'layui-btn-primary'">无</button>
                                        </div>
                                        <div class="layui-btn-group"
                                             style="margin-left: 10px;">
                                            <button type="button"
                                                    class="layui-btn layui-btn-xs"
                                                    @click="gray = 1"
                                                    :class="gray == 1 ? 'layui-btn-normal' : 'layui-btn-primary'">gray</button>
                                            <button type="button"
                                                    class="layui-btn layui-btn-xs"
                                                    @click="gray = 0"
                                                    :class="gray == 0 ? 'layui-btn-normal' : 'layui-btn-primary'">无</button>
                                        </div>
                                        <div class="layui-btn-group"
                                             style="margin-left: 10px;">
                                            <button type="button"
                                                    class="layui-btn layui-btn-xs"
                                                    @click="mobile = 1"
                                                    :class="mobile == 1 ? 'layui-btn-normal' : 'layui-btn-primary'">手机端</button>
                                            <button type="button"
                                                    class="layui-btn layui-btn-xs"
                                                    @click="mobile = 0"
                                                    :class="mobile == 0 ? 'layui-btn-normal' : 'layui-btn-primary'">正常</button>
                                        </div>
                                    </div>
                                    <div class=""
                                         style="margin-top: 10px;">
                                        <div class="preview content"
                                             :class="{'ul-bg-gray':gray,'ul-padding-md':padding,'ul-margin-md':margin}"
                                             :style="mobile== 1?'display:none':''">{$vo.html|raw}</div>
                                        <iframe class="preview iframe ul-demo-mobile-page"
                                                :class="{'ul-bg-gray':gray,'ul-padding-md':padding,'ul-margin-md':margin}"
                                                :style="mobile== 0?'display:none':''"></iframe>
                                    </div>
                                </div>
                                <div class="code">
                                    <div class="layui-tab layui-tab-card">
                                        <ul class="layui-tab-title">
                                            <li class="layui-this">HTML</li>
                                            <li>SCSS</li>
                                            <li>CSS</li>
                                            <li>UniApp</li>
                                        </ul>
                                        <div class="layui-tab-content"
                                             style="padding:0">
                                            <div class="layui-tab-item layui-show">
                                                <pre style="margin: 0;max-height: 400px;"
                                                     class="line-numbers code-preview"><code class="language-html">{$vo.html}</code></pre>
                                            </div>
                                            <div class="layui-tab-item ">
                                                <pre style="margin: 0;max-height: 400px;"
                                                     class="line-numbers code-preview"><code class="language-scss">{$vo.scss}</code></pre>
                                            </div>
                                            <div class="layui-tab-item">
                                                <pre style="margin: 0;max-height: 400px;"
                                                     class="line-numbers code-preview"><code class="language-css">{$vo.css}</code></pre>
                                            </div>
                                            <div class="layui-tab-item">
                                                <pre style="margin: 0;max-height: 400px;"
                                                     class="line-numbers code-preview"><code class="language-html">{$vo.uniapp}</code></pre>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="desc markdown-body ">
                                    {$vo.desc|raw}
                                </div>
                            </div>
                        </fieldset>
                        {/volist}
                    </div>


                </div>

                <div class="ul-padding-md">
                    <div id="gitee-container">
                        <fieldset class="layui-elem-field layui-field-title ">
                            <legend>开源信息</legend>
                            <div class="layui-field-box">
                                <script src='https://gitee.com/ulthon/layui-ul/widget_preview'
                                        async
                                        defer></script>
                                <div id="osc-gitee-widget-tag"></div>
                                <style>
                                    .osc_pro_color {
                                        color: #4183c4 !important;
                                    }

                                    .osc_panel_color {
                                        background-color: #ffffff !important;
                                    }

                                    .osc_background_color {
                                        background-color: #ffffff !important;
                                    }

                                    .osc_border_color {
                                        border-color: #e3e9ed !important;
                                    }

                                    .osc_desc_color {
                                        color: #666666 !important;
                                    }

                                    .osc_link_color * {
                                        color: #9b9b9b !important;
                                    }
                                </style>
                            </div>
                        </fieldset>


                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="right-tips-container"
         style="display: none;">
        <div class="ul-nav-min right-tips-nav"
             style="width: 160px;">

        </div>
    </div>
    <div class="tpl"
         style="display: none;">
        <a class="ul-nav-min-item">
            个人中心
        </a>
    </div>
    <script>

        $('.main-content h2,.main-content>.demo-page>fieldset').each(function (index, elem) {
            if ($(elem).hasClass('no-parser')) {
                return;
            }
            if ($(elem).find('.demo-js-src').length == 0) {
                $(elem).children('.layui-field-box')
                    .addClass('demo-js-src')
                    .css('display', 'block')
                    .data('title', $(elem).children('legend').text());
            }
        });
        $('.main-content h2,.main-content>.demo-page>fieldset>legend').each(function (index, elem) {

            var id = 'title' + index;
            $(elem).attr('id', id);

            var navItem = $('.tpl .ul-nav-min-item').clone();
            navItem.attr('href', '#' + id);
            navItem.text($(elem).text());
            navItem.appendTo('.right-tips-nav');
        });

        if ($('.right-tips-nav').children().length > 0) {
            layer.open({
                type: 1,
                content: $('.right-tips-container'),
                title: '目录',
                offset: 'r',
                closeBtn: 0,
                shade: 0,
                success(layero) {
                    $(layero).css('margin-left', '-15px');
                }
            });
        }
        function renderRepeat(elem) {
            $(elem).find('[data-repeat]').each(function () {
                for (let index = 1; index < $(this).data('repeat'); index++) {
                    var clone = $(this).clone();
                    clone.insertAfter(this);
                    renderRepeat(clone);
                }
            });
        }




        $('.demo-js-src').each(function () {
            var html = $(this).html();
            var htmlList = html.split(/[\n]/g);
            var htmlListNew = [];
            var baseLineBlankNums = -1;
            htmlList.forEach(function (htmlLine, htmlIndex) {
                if (htmlIndex == 0 && htmlLine.length == 0) {
                    return true;
                }
                if (baseLineBlankNums < 0) {
                    var kong = htmlLine.match(/^ */g); //筛选
                    if (kong != null) {
                        baseLineBlankNums = kong[0].length;
                    } else {
                        baseLineBlankNums = 0;
                    }
                }

                htmlListNew.push(htmlLine.slice(baseLineBlankNums));
            });
            var contentCode = htmlListNew.join("\n");
            if ($(this).siblings('pre.demo-js').length == 0) {
                var title = $(this).data('title');

                if (!title) {
                    title = $(this).closest('fieldset').find('legend').text();
                }
                $('<pre  class="layui-code demo-js" lay-title="' + title + '"></pre>').insertAfter(this);
            }
            $(this).siblings('pre.demo-js').text(contentCode);
        });

        renderRepeat('body');

        layui.form.render();
        layui.element.render();
        layui.code({
            encode: true
        });
        layui.util.fixbar();

        const { createApp } = Vue;


        $('.component-item').each(function (index, elem) {
            var html = $(elem).find('.preview.content').html();

            createApp({
                data() {
                    return {
                        margin: $(elem).data('margin'),
                        padding: $(elem).data('padding'),
                        gray: $(elem).data('gray'),
                        mobile: $(elem).data('mobile'),
                        innerMargin: $(elem).data('inner-margin'),

                    };
                },

                mounted() {

                    var iframe = $(elem).find('.preview.iframe')[0];
                    var preview =
                        iframe.contentDocument ||
                        iframe.contentWindow.document;

                    var innerMarginStyle = '';

                    if (this.innerMargin == 1) {
                        innerMarginStyle = 'margin-right:15px';
                    }

                    var iframeHtml = '<!DOCTYPE html>' +
                        '<html lang="en">' +
                        '<head>' +
                        '<meta charset="UTF-8">' +
                        '<meta http-equiv="X-UA-Compatible" content="IE=edge">' +
                        '<meta name="viewport" content="width=device-width, initial-scale=1.0">' +
                        '<title>演示</title>' +
                        '<link rel="stylesheet" href="/static/css/reset.css">' +
                        '<link rel="stylesheet" href="/static/css/pagination.css">' +
                        '<link rel="stylesheet" href="/static/lib/layui/css/layui.css">' +
                        '<link rel="stylesheet" href="/cdn/layui-ul.css">' +
                        '<link rel="stylesheet" href="/cdn/layui-ul-mb.css">' +
                        '</head>' +
                        '<body style="' + innerMarginStyle + '">' +
                        html +
                        '</body>' +
                        '</html>';

                    preview.open();
                    preview.write(iframeHtml);
                    preview.close();
                }

            }).mount(elem);
        });
        console.log($('.main-content').width());
        $('.code-preview').css('width', 'calc(' + $('.main-content').width() + 'px - 1em - 3.8em)')

    </script>
</body>

</html>